<template>
  <div class="w-full text-14px pb-80px">
    <van-tabs v-model:active="active" @change="tabsChange">
      <van-tab :title="item.name" v-for="(item, index) in tabsList">
        <div class="mt-10px p-20px bg-white" v-for="items in Info.data">
          <div class="flex justify-between items-center pb-15px border-b">
            <div>证书ID：{{ items.goods_code }}</div>
            <div class="text-[#F9363C]">
              <span v-show="index == 0">待确认</span>
              <span v-show="index == 1">已转入</span>
              <span v-show="index == 2">已转出</span>
            </div>
          </div>
          <div class="mt-15px">
            <div>馆藏精品：{{ items.goods_no }}</div>
            <div class="mt-15px">价格：{{ items.price }}</div>
            <div class="mt-15px">转出店：{{ items.shop_name }}</div>
            <div class="mt-15px">接收店：{{ items.in_shop_name }}</div>
            <div class="mt-15px" v-show="items.create_time">
              转移时间：{{ items.create_time }}
            </div>
            <div class="mt-15px" v-show="items.update_time">
              更新时间：{{ items.update_time }}
            </div>
          </div>
          <div
            class="mt-15px w-full flex justify-between items-center"
            v-show="index == 0"
          >
            <div
              @click="openPopup(items)"
              class="w-62px h-28px text-[#2E95FF] border border-[#2E95FF] rounded-5px flex items-center justify-center"
            >
              确认
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-popup v-model:show="showCenter" round class="p-20px">
      <div class="w-305px">
        <div class="mt-10px w-full text-center">转移确认</div>
        <!-- <div class="mt-20px">
          <van-cell-group inset class="border border-[#999999]">
            <van-field
              v-model="inputVal"
              :placeholder="placeholder"
              class="h-44px w-full"
            />
          </van-cell-group>
        </div> -->
        <div class="flex justify-between items-center mt-20px">
          <div
            @click="showCenter = false"
            class="w-124px h-36px flex justify-center items-center bg-[#FAF9F9] rounded-5px text-[#999999] text-12px"
          >
            取消
          </div>
          <div
            @click="confirm()"
            class="w-124px h-36px flex justify-center items-center bg-[#2E95FF] rounded-5px text-12px text-[white]"
          >
            确认
          </div>
        </div>
      </div>
    </van-popup>
  </div>
  <div v-show="Info.data.length <= 0" class="mt-200px">
    <nodata></nodata>
  </div>
  <pagination
    @back="back"
    @next="next"
    :current_page="Info.current_page"
    :last_page="Info.last_page"
    :total="Info.total"
    :per_page="Info.per_page"
  ></pagination>
</template>
<script setup>
import pagination from "@/components/pagination.vue";
import { shopTransitionList, shopTrueTransition } from "@/util/api";
import nodata from "@/components/nodata.vue";
import { showToast } from "vant";
const active = ref("0");
const tabsList = ref([
  { name: "待确认" },
  {
    name: "转入记录",
  },
  {
    name: "转出记录",
  },
]);
const Info = reactive({
  current_page: 0,
  last_page: 0,
  total: 0,
  per_page: 0,
  data: [],
});
const id = ref();
const showCenter = ref(false);
const state = ref(0); //0待确定1转入记录2转出记录
const page = ref(1);
const getData = async () => {
  const res = await shopTransitionList({
    state: state.value,
    page: page.value,
  });
  for (let i in Info) {
    Info[i] = res.msg[i];
  }
  // console.log(Info);
};
const tabsChange = (v) => {
  state.value = v;
  getData();
  // console.log(v);
};
const back = () => {
  page.value--;
  getData();
};
const next = () => {
  page.value++;
  getData();
};
const openPopup = (item) => {
  showCenter.value = true;
  id.value = item.id;
};
const confirm = async () => {
  showCenter.value = false;
  const res = await shopTrueTransition({ id: id.value });
  showToast(res.msg);
  getData();
};
</script>
